<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="餐饮管理系统">
    <meta name="keywords" content="HTML,css,餐饮,用户">
    <meta name="author" content="Marinda">
    <!-- Link Swiper's public/css -->

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>会员页</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
        integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
    <!-- 最新版本的 Bootstrap 核心 public/css 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="public/css/swiper.min.css">
    <link rel="stylesheet" href="public/css/member.css">
    <!--icon 矢量图标 -->
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2813781_gsa66hcs0vw.public/css?spm=a313x.7781069.1998910419.81&file=font_2813781_gsa66hcs0vw.css">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
</head>

<body>

    <div class="container">
        <header>
            <div class="logo_xs_view col-xs-3 col-lg-7 col-sm-3 col-md-6">
                <div class="logo col-xs-12 col-sm-7 col-md-7 col-lg-12">
                    <img src="public/image/logo.png" alt="餐饮系统" class="col-xs-3 col-sm-4 col-md-6 col-lg-2" width="50px"
                        height="50px">
                    <h1 class="col-lg-3 col-sm-6 col-md-6">会员中心</h1>
                </div>
            </div>
            <!-- 

                导航栏应有 返回首页 个人中心

             -->
            <nav class="navs col-xs-9 col-sm-4 col-md-4 col-lg-5">
                <ul>
                    <li class=" col-sm-6 col-md-6 col-lg-3"><a href="#">返回首页</a></li>
                    <li class=" col-sm-6 col-md-6 col-lg-3"><a href="#">个人中心</a></li>
                </ul>
            </nav>
        </header>

        <!-- 
        会员等级
        会员折扣
        充值会员(消费金额)
        会员优享
        
    -->
        <main class="col-xs-12 col-md-12 col-sm-12 col-lg-12">

            <!-- 
                会员等级分类 青铜 白银 黄金 铂金 钻石
             -->

            <!-- 会员等级分类 -->
            <div class="member_level col-xs-12 col-md-12 col-sm-12 col-lg-12">
                <h2 style="text-align: center;"><span class="iconfont icon-VIP"
                        style="color: red;font-size: 20px;"></span> 会员区间 <span class="iconfont icon-VIP"
                        style="color: red;font-size: 20px;"></span></h2>
                <div class="member_item col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <div class="member_item_text">
                        <h3><span style="color: rgb(77, 59, 59);">青铜</span>会员</h3>
                        <p>订单结算享受99折优惠,消费满100 可得五元代金券</p>
                        <div class="join_button">立即充值</div>
                    </div>
                </div>
                <div class="member_item col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <div class="member_item_text">
                        <h3><span style="color: green;">白银</span>会员</h3>
                        <p>订单结算享受98折优惠,消费满100 可得十元代金券</p>
                        <p>每月可享受一次预约订餐免手续费</p>
                        <div class="join_button">立即充值</div>
                    </div>
                </div>
                <div class="member_item col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <div class="member_item_text">
                        <h3><span style="color: orange;">黄金</span>会员</h3>
                        <p>订单结算享受95折优惠，消费满100 可得二十元代金券、满300送五十代金券</p>
                        <p>每月可享受三次预约订餐免手续费</p>
                        <p>专属订台服务、桌号预定</p>
                        <div class="join_button">立即参与</div>
                    </div>
                </div>
                <div class="member_item col-lg-12 col-md-12 col-xs-12 col-sm-12">
                    <div class="member_item_text">
                        <h3><span style="color: #60E7A6;">白金</span>会员</h3>
                        <p>订单结算享受85折优惠，消费满500 可得200元代金券、满1000送五百代金券</p>
                        <p>每月可享受无限次数预约订餐免手续费</p>
                        <p>专属订台服务、桌号预定、积分兑换</p>
                        <div class="join_button">立即参与</div>
                    </div>
                </div>
            </div>

            <!-- 会员优享 (福利中心) -->
            <div class="member_fuli col-xs-12 col-md-12 col-sm-12 col-lg-12">
                <!-- 会员优享 -->
                <!-- 

                    积分系统
                    礼品超市
                    应用服务

                 -->

                <!-- 积分系统 -->
                <div class="member_integral col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h2 style="text-align: center;"><span class="iconfont icon-jingxuanyoupin"
                        style="color: green;font-size: 20px;"></span> 会员优享 <span class="iconfont icon-jingxuanyoupin"
                        style="color: green;font-size: 20px;"></span></h2>
                    <div class="member_show_item col-xs-12 col-md-5 col-sm-12 col-lg-5">
                        <img src="public/image/meal_1.jpg" alt="菜品">
                        <p>福利商品1</p>
                        <p class="member_price" style="float: right;">福利券：5张</p>
                        <div class="member_button">立即选购</div>
                    </div>
                    <div class="member_show_item col-xs-12 col-md-5 col-sm-12 col-lg-5">
                        <img src="public/image/meal_2.jpg" alt="菜品">
                        <p>福利商品2</p>
                        <p class="member_price" style="float: right;">福利券：5张</p>
                        <div class="member_button">立即选购</div>
                    </div>
                    <div class="member_show_item col-xs-12 col-md-5 col-sm-12 col-lg-5">
                        <img src="public/image/meal_12.jpg" alt="菜品">
                        <p>福利商品3</p>
                        <p class="member_price" style="float: right;">福利券：5张</p>
                        <div class="member_button" style="margin-right: -85px;">立即选购</div>
                    </div>
                    <div class="member_show_item col-xs-12 col-md-5 col-sm-12 col-lg-5">
                        <img src="public/image/meal_4.jpg" alt="菜品">
                        <p>福利商品4</p>
                        <p class="member_price" style="float: right;">福利券：5张</p>
                        <div class="member_button">立即选购</div>
                    </div>
                    <div style="clear: both;"></div>
                    <div class="member_more col-lg-5" style="float: none;text-align: center;margin: 0 auto;margin-top: 30px;">
                        查询更多</div>
                </div>
            </div>
        </main>

    </div>

</body>

</html>